/* Styles below are mostly copy of the default theme styles. We need to move
   the sidebar container styles to our own container that contains both:
   the original sidebar (with styles on the root element removed) and EthicalAds
   container */

.extra {
	display: flex;
	justify-content: center;
	min-height: 12.5rem;
	background-color: var(--ifm-color-white);
	transition: opacity 0.2s ease-in-out;
}

.hidden {
	opacity: 0;
}

/* HACK: Horizontal EthicalAds layout */
@media (max-width: 996px) {
	[class*='docSidebarContainer'] {
		width: auto !important;
	}

	.extra [data-ea-publisher]:global(.loaded) :global(.ea-content) {
		max-width: 100%;
	}
	.extra [data-ea-publisher]:global(.loaded) :global(.ea-content) > :global(.ea-text) {
		margin-top: 0;
		text-align: left;
		overflow: hidden;
	}
	.extra [data-ea-publisher]:global(.loaded) :global(.ea-callout) {
		max-width: 100%;
		text-align: right;
	}
}

@media (min-width: 997px) {
	.extra {
		min-height: 24rem;
		padding-top: var(--ifm-navbar-height);
	}

	.sidebar {
		height: 100vh;
		overflow-y: auto;
		position: sticky;
		top: 0;
	}

	/* HACK: Remove styles from the theme sidebar container */
	.sidebar > *:first-child + * {
		height: initial;
		overflow: initial;
		position: initial;
		top: initial;
		padding-top: initial;
	}

	.sidebar::-webkit-scrollbar {
		width: 7px;
	}

	.sidebar::-webkit-scrollbar-track {
		background: #f1f1f1;
		border-radius: 10px;
	}

	.sidebar::-webkit-scrollbar-thumb {
		background: #888;
		border-radius: 10px;
	}

	.sidebar::-webkit-scrollbar-thumb:hover {
		background: #555;
	}
}
